<template>
  <div class="hello">
    <div class="db">
      <span>饿了么</span>
      <input type="text" placeholder="输入商家、商品名称" />
    </div>
    <!-- 轮播图 -->
    <div class="swiper"></div>
    <!-- 列表 -->
    <div class="list">
      <h2>猜你喜欢</h2>
      <div class="list1">
        <span
          :class="{ active: arr == index }"
          v-for="(item, index) in arr1"
          :key="index"
          @click="fun(index)"
          >{{ item }}</span
        >
        <!-- <span>距离最近</span>
          <span>销量最高</span>
          <span>筛选</span> -->
      </div>
      <!-- 活动列表 -->
      <div class="list2">
        <span
          :class="{ active: arr == index }"
          v-for="(item, index) in arr2"
          :key="index"
          >{{ item }}</span
        >
      </div>
      <!-- 店铺列表 -->
      <div class="list3" v-for="(item,index) in arr3" :key="index">
        <img :src="item.picUrl" alt="" />
        <div class="box">
          <h3>{{item.name}}</h3>
          <div class="sp">
            <span>4.9</span>
            <span>{{item.monthSalesTip}}</span>
          </div>
          <div class="ps">
            <span>{{item.minPriceTip}}</span>
            <span>{{item.shippingFeeTip}}</span>
          </div>
          <div class="yh">
            <span>{{item.discounts2.info}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { shop_list } from '../utils/api.js';
import { banner_list } from '../utils/api.js'
export default {
  data() {
    return {
      arr: 0,
      arr1: ["综合排序", "距离最近", "销量最高", "筛选"],
      arr2: ["年货节热卖", "津贴联盟", "满减优惠", "品质联盟"],
      arr3: [],
      bannerlist:[]
    };
  },
  methods: {
    fun(index) {
      if (index == 1) {
        this.arr3.sort((a, b) => {
          return a.deliveryTimeTip.slice(0, 2) - b.deliveryTimeTip.slice(0, 2);
        });
      } else if (index == 2) {
        this.arr3.sort((a, b) => {
          return b.monthSalesTip.slice(2) - a.monthSalesTip.slice(2);
        });
      }
      this.arr = index;
    },
  },
  mounted() {
    console.log(111111)
    shop_list().then((res) => {
      console.log(res);
      this.arr3 = res.data.list;
    })
      banner_list().then((res) => {
      console.log(res);
      this.bannerlist = res.data.list;
    })
  },

};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="css" scoped>
* {
  margin: 0;
  padding: 0;
}
.db {
  height: 120px;
  background-color: rgb(33, 149, 250);
}
.db span {
  display: block;
  font-size: 30px;
  color: aliceblue;
  padding: 10px 20px;
}
.db input {
  height: 40px;
  width: 90%;
  display: block;
  margin: auto;
  padding-left: 10px;
  border-radius: 20px;
  text-align: center;
  border: 1px solid rgb(255, 255, 255);
}
.swiper {
  width: 90%;
  height: 200px;
  background-color: aquamarine;
  display: block;
  margin: 15px auto;
  border-radius: 5px;
}
.list h2 {
  margin-bottom: 10px;
  margin-left: 20px;
}
.list .list1 {
  width: 90%;
  display: flex;
  margin: 10px auto;
  justify-content: space-between;
}
.list .list2 {
  width: 90%;
  display: flex;
  margin: 10px auto;
  justify-content: space-between;
}
.list .list2 span {
  background-color: #ccc;
  padding: 10px 8px;
  border-radius: 10px;
}
.list3 {
  margin: 20px 30px;
  display: flex;
}
.list .list3 img {
  width: 100px;
  height: 100px;
}
.list3 .box {
  margin-left: 10px;
}
.box .sp{
  margin: 10px auto;
}
</style>
